<template>
	<scroll-view scroll-y="true" class="wrapper">
		<!-- <uni-nav-bar leftIcon="back" @clickLeft="$back" right-icon="plusempty" title="我的动态" @clickRight="changeAlert" ></uni-nav-bar> -->
		<view class="main">
			<!-- 顶部背景图和头像 -->
			<view class="top_info">
				<view class="back_box"></view>
				<view class="up_box">
					<image src="../../static/find/upphoto.png" mode="aspectFill" @tap="$open('../find/sendPhoto')"></image>
					<image src="../../static/find/upvideo0.png" mode="aspectFill" @tap="$open('../find/sendVideo')"></image>
					<image src="../../static/find/mynews.png" mode="aspectFill" @tap="opennews()"></image>
				</view>
				<dimg :src="'' | avatar" mode="aspectFill" class="avatar"></dimg>
			</view>
			<view class="news center c24 cfff" v-if="ratingNum > 0" @tap="opennews()">
				<dimg :src="'' | avatar" mode="aspectFill" class="avatar"></dimg>
				{{ ratingNum }}条新消息
			</view>
			<view class="new_box center" v-for="(val, index) in list" :key="val.msgId">
				<dimg :src="val.userId | avatar" mode="aspectFill" class="avatar"></dimg>
				<view class="new_main flex">
					<view class="user_name f30 ctheme">{{ val.nickname }}</view>
					<!-- 文本 -->
					<view class="new_text f26">{{ val.body.text }}</view>
					<!-- 图片 -->
					<view class="new_img_box center" v-if="!val.body.videos">
						<image @tap="previewImage(val.body.images)" :src="tem.oUrl" mode="aspectFill" class="new_img" v-for="(tem, i) in val.body.images" :key="i"></image>
					</view>
					<!-- 视频 -->
					<view class="new_img_box center"><video :src="tem.oUrl" mode="aspectFill" class="new_img" v-for="(tem, i) in val.body.videos" :key="i"></video></view>
					<!-- 底部操作栏 -->
					<view class="new_operation center flex-start ctheme" v-if="val.location">{{ val.location }}</view>
					<view class="new_operation center">
						<view class="time_box f22 cfff center">
							{{ val.time | timediff }}
							<text class="ctheme" v-if="userinfo.userId == val.userId" @tap="msgDelete(val.msgId, index)">删除</text>
						</view>
						<view class="operation_box center flex flex-end ctheme">
							<!-- 点赞 -->
							<image src="../../static/find/s43.png" mode="aspectFit" v-if="val.isPraise == 1" @tap="praiseDelete(val.msgId, index)"></image>
							<image src="../../static/find/s42.png" mode="aspectFit" v-if="val.isPraise == 0" @tap="praiseAdd(val.msgId, index)"></image>
							{{ val.count.praise }}
							<!-- 评论 -->
							<block v-if="val.isAllowComment == 0">
								<image src="../../static/find/israting.png" mode="aspectFit" v-if="val.iscomments" @tap="commShow(val.msgId, index)"></image>
								<image src="../../static/find/s44.png" mode="aspectFit" v-if="!val.iscomments" @tap="commShow(val.msgId, index)"></image>
								{{ val.count.comment }}
							</block>
							<!-- 收藏 -->
							<image src="../../static/find/s40.png" mode="aspectFit" v-if="val.isCollect == 1" @tap="deleteCollect(val.msgId, index)"></image>
							<image src="../../static/find/s39.png" mode="aspectFit" v-if="val.isCollect == 0" @tap="emojiAdd(val, index)"></image>
							<!-- 举报 -->
							<picker mode="selector" :range="ReportList" @change="ReportChange" :data-id="val.userId">
								<image src="../../static/find/s45.png" mode="aspectFit"></image>
							</picker>
						</view>
					</view>
					<!-- 底部评论区 -->
					<view class="rating_box">
						<view class="like_box center fWrap flex-start" v-if="val.praises.length != 0">
							<view class="like center ctheme" v-for="(item, i) in val.praises" :key="i">
								<image src="../../static/find/lick.png" mode="aspectFill" class="like_img"></image>
								{{ item.nickname }}
							</view>
						</view>
						<view class="rating" @longpress="showDelete" :data-item="item" :data-msgIndex="index" :data-commentIndex="i" v-for="(item, i) in val.comments" :key="i">
							<text class="ctheme">{{ item.nickname }}</text>
							:{{ item.body }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="input_rating center" v-if="showRating">
			<input type="text" placeholder="评论" focus="true" v-model="body" />
			<button class="f26" type="primary" @tap="commentAdd">发送</button>
		</view>
		<dl-layer v-if="showAlert" @closeAlert="closeAlert">
			<view slot="main">
				<view class="center" @tap.stop="$open('../find/sendPhoto')"><view class="f30">发送图文</view></view>
				<view class="center" @tap.stop="$open('../find/sendVideo')"><view class="f30">发布视频</view></view>
				<view class="center" @tap.stop="$open('../find/newRating')"><view class="f30">最新评论</view></view>
			</view>
		</dl-layer>
		<dl-layer v-if="left != ''" :left="left" :top="top" :showArr="false" width="160rpx" @closeAlert="closeAlert">
			<view slot="main">
				<view class="center" @tap="commentDelete"><view class="f30">删除</view></view>
			</view>
		</dl-layer>
	</scroll-view>
</template>

<script>
import dlLayer from '@/components/dl-layer/dl-layer.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	data() {
		return {
			showAlert: false,
			left: '',
			top: '',
			list: [],
			userinfo: '',
			showRating: false,
			ReportList: [
				'发布不适当内容对我造成骚扰',
				'发布色情内容对我造成骚扰',
				'发布违法违禁内容对我造成骚扰',
				'发布赌博内容对我造成骚扰',
				'发布整治造谣内容对我造成骚扰',
				'发布爆恐血腥内容对我造成骚扰',
				'发布其他违规内容对我造成骚扰',
				'存在欺诈骗钱行为',
				'此账号可能被盗用',
				'存在侵权行为',
				'发布仿冒品信息'
			],
			msgId: '',
			body: '',
			msgIndex: 0,
			commentId: '',
			commentIndex: 0,
			ratingNum: 0
		};
	},
	components: { uniNavBar, dlLayer },
	created() {
		this.init();
	},
	methods: {
		init() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.ratingNum = uni.getStorageSync('ratingNum');
			this.showAlert = false;
			this.getList();
		},
		// 打开最新消息
		opennews() {
			this.ratingNum = 0;
			uni.setStorageSync('ratingNum', 0);
			uni.removeTabBarBadge({
				index: 2
			});
			this.$open('../find/newRating');
		},
		closeAlert() {
			this.left = '';
			this.showAlert = false;
		},
		// 预览图片
		previewImage(url) {
			console.log(url)
			let list=[]
			url.map(item => {
				list.push(item.oUrl)
			})
			uni.previewImage({
				urls: list
			});
		},
		// 删除动态
		async msgDelete(msgId, index) {
			let that = this;
			let boo = await this.$sModal('确定删除吗？');
			if (boo) {
				that.$ajax(
					that.apiList.msgDelete,
					{
						messageId: msgId
					},
					'GET'
				).then(res => {
					that.$sToast('删除成功');
					that.getList();
					// that.list.splice(index, 1);
				});
			}
		},
		// 删除评价
		commentDelete() {
			this.$ajax(
				this.apiList.commentDelete,
				{
					messageId: this.msgId,
					commentId: this.commentId
				},
				'GET'
			).then(res => {
				this.$sToast('删除成功');
				this.left = '';
				this.getList();
				// this.list[this.msgIndex].iscomments = false;
				// this.list[this.msgIndex].count.comment--;
				// this.list[this.msgIndex].comments.splice(this.commentIndex, 1);
			});
		},
		// 插入评价
		commentAdd() {
			this.$ajax(
				this.apiList.commentAdd,
				{
					messageId: this.msgId,
					body: this.body
				},
				'GET'
			).then(res => {
				this.$sToast('评论成功');
				this.showRating = false;
				this.getList();
				// this.list[this.msgIndex].iscomments = true;
				// this.list[this.msgIndex].count.comment++;
				// this.list[this.msgIndex].comments.unshift({ body: this.body, msgId: this.msgId, nickname: uni.getStorageSync('userinfo').nickname });
			});
		},
		// 点击评论按钮显示输入框
		commShow(msgId, index) {
			this.msgId = msgId;
			this.msgIndex = index;
			this.showRating = true;
		},
		// 举报
		ReportChange(e) {
			this.$ajax(
				this.apiList.userReport,
				{
					reason: 10 + e.detail.value,
					toUserId: e.currentTarget.dataset.id
				},
				'GET'
			).then(res => {
				this.$sToast('举报成功');
			});
		},
		// 取消收藏
		deleteCollect(messageId, index) {
			this.$ajax(this.apiList.deleteCollect, {
				messageId: messageId
			}).then(res => {
				this.list[index].isCollect = 0;
				// this.getList();
			});
		},
		// 添加收藏
		emojiAdd(item, index) {
			let msg = [];
			if (item.body.images) {
				item.body.images.map(item => {
					msg.push(item.oUrl);
				});
			}
			this.$ajax(this.apiList.emojiAdd, {
				emoji: JSON.stringify([
					{
						fileName: '',
						collectType: 1,
						fileSize: 0,
						collectContent: item.body.text,
						collectMsgId: item.msgId,
						type: msg.length == 0 ? 5 : 1,
						fileLength: 0,
						msg: msg.length == 0 ? item.body.text : msg.join(',')
					}
				])
			}).then(res => {
				this.list[index].isCollect = 1;
				// this.getList();
			});
		},
		// 取消点赞
		praiseDelete(messageId, index) {
			this.$ajax(this.apiList.praiseDelete, {
				messageId: messageId
			}).then(res => {
				this.list[index].isPraise = 0;
				this.list[index].count.praise--;
				// this.getList();
			});
		},
		// 点赞
		praiseAdd(messageId, index) {
			this.$ajax(this.apiList.praiseAdd, {
				messageId: messageId
			}).then(res => {
				this.list[index].isPraise = 1;
				this.list[index].count.praise++;
				// this.getList();
			});
		},
		// 查询列表
		getList() {
			this.list = [];
			this.$ajax(
				this.apiList.msgList,
				{
					pageSize: 20
				},
				'GET'
			).then(res => {
				res.data.map(item => {
					item.comments.forEach(citem => {
						if (item.userId == citem.userId) {
							return (item.iscomments = true);
						}
					});
				});
				this.list = res.data;
			});
		},
		// 长按评论事件
		showDelete(e) {
			if (e.currentTarget.dataset.item.userId == uni.getStorageSync('userinfo').userId) {
				this.msgIndex = e.currentTarget.dataset.msgindex;
				this.commentIndex = e.currentTarget.dataset.commentindex;
				this.msgId = e.currentTarget.dataset.item.msgId;
				this.commentId = e.currentTarget.dataset.item.commentId;
				this.left = e.changedTouches[0].clientX - 40 + 'px';
				this.top = e.changedTouches[0].clientY + 20 + 'px';
			}
		},
		changeAlert() {
			this.showAlert = !this.showAlert;
		}
	}
};
</script>

<style lang="scss">
.up_box {
	position: absolute;
	left: 30rpx;
	bottom: 0;
	image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 50rpx;
		border-radius: 50%;
	}
}
.alert_list {
	background: #ffffff;
	width: 345rpx;
	border-radius: 12rpx;
	.center {
		padding: 28rpx 45rpx;
		justify-content: flex-start;
	}
	image {
		width: 40rpx;
		height: 39rpx;
		margin-right: 33rpx;
	}
}
.input_rating {
	position: fixed;
	left: 0;
	// bottom: 90rpx;
	bottom: 0;
	width: 100%;
	height: 98rpx;
	background: rgba(242, 243, 245, 1);
	z-index: 998;
	button {
		height: 50rpx;
		background: rgba(2, 151, 254, 1);
		border-radius: 4rpx;
		line-height: 50rpx;
		margin: 0;
	}
	input {
		width: 570rpx;
		height: 65rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		padding-left: 20rpx;
		margin-right: 30rpx;
	}
}
.news {
	width: 200rpx;
	height: 58rpx;
	background: rgba(2, 151, 254, 1);
	border-radius: 4rpx;
	margin: 42rpx auto 30rpx;
	.avatar {
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		overflow: hidden;
	}
}
.new_box {
	padding: 20rpx 37rpx;
	align-items: flex-start;
	border-bottom: 1rpx solid #e0e0e0;
	.rating_box {
		width: 586rpx;
		background: rgba(242, 243, 245, 1);
		padding: 0 20rpx;
		margin: 20rpx 0;
		.rating {
			padding: 10rpx 0;
		}
		.like_box {
			border-bottom: 1rpx solid #e0e0e0;
			padding: 20rpx 0;
			image {
				width: 25rpx;
				height: 25rpx;
				margin: 0 15rpx;
			}
		}
	}
	.time_box {
		.ctheme {
			margin-left: 20rpx;
		}
	}
	.new_operation {
		image {
			width: 25rpx;
			height: 24rpx;
			margin: 0 4rpx 0 20rpx;
		}
	}
	.new_img_box {
		flex-wrap: wrap;
		width: 585rpx;
		justify-content: flex-start;
		video {
			width: 373rpx;
			height: 373rpx;
			margin-bottom: 15rpx;
			overflow: hidden;
		}
		image {
			width: 184rpx;
			height: 184rpx;
			margin-bottom: 15rpx;
			&:not(:nth-of-type(3n)) {
				margin-right: 15rpx;
			}
		}
	}
	.new_text {
		width: 580rpx;
		padding: 19rpx 0 27rpx;
		color: #fff;
	}
	.ctheme {
		color: #fff;
	}
	.avatar {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		overflow: hidden;
	}
}
.top_info {
	width: 750rpx;
	height: 160rpx;
	position: relative;
	.back_box {
		width: 750rpx;
		height: 160rpx;
		overflow: hidden;
	}
	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		right: 40rpx;
		top: 20rpx;
		position: absolute;
		overflow: hidden;
		border: 5rpx solid #ffffff;
	}
}
</style>
